<template>
	<view class="card flex-layout" :class="{'rotate' : rotate}">
		<k-ornament></k-ornament>
		<view class="card-item front">
			<slot name='front'></slot>
		</view>
		<view class="card-item back">
			<slot name='back'></slot>
		</view>
	</view>
</template>

<script>
	import kOrnament from './ornament.vue'
	export default {
		components: {
			kOrnament
		},
		props: {
			rotate: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped lang="scss">
	.flex-layout {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center
	}

	.card {
		position: relative;
		transform-style: preserve-3d;
		transition: transform 0.6s;
		transform: rotateY(0deg) translateZ(0);
		perspective: 1000px;
		-websxran-im-transform: translate3d(0, 0, 0);
		will-change: transform;

		.card-header {
			position: absolute;
			top: -60px;
		}

		.card-item {
			position: absolute;
			backface-visibility: hidden;
			-websxran-im-backface-visibility: hidden;
		}

		.front {
			transform: rotateY(0deg);
		}

		.back {
			transform: rotateY(180deg);
		}
	}

	.rotate {
		transform: rotateY(-180deg);
	}
</style>